<template>
  <Panel tite="订单统计">
  <div class="sale" ref="chart">
    <el-date-picker
      v-model=" date"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    >
    </el-date-picker>
    <el-button type="primary" @click="btn">查询</el-button>
    <LineChart :xData="xData" :yData="yData"></LineChart>
  </div>
  </Panel>
</template>

<script>
// import * as echarts from "echarts";
import dayjs from "dayjs";

import { ordertotalReq } from "@/api/order.api";

import LineChart from "@/components/line/LineChart.vue";
export default {
  components: {
    LineChart,
  },
  data() {
    return {
      xData: [],
      yData: [{ name: "订单量", data: [] }],

      date: [],

      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {

    btn() {
      const date = JSON.stringify(
        this. date.map( item => dayjs(item).format("YYY-MM-DD HH:mm:ss"))
       
      );

      ordertotalReq(date).then((res) => {
        console.log(date);
        // 把时间转换成字符串
        this.xData = res.data.data.map(item => dayjs(item.orderTime).format("MM-DD"));

        this.yData[0].data = res.data.data.map(item => item.orderAmount);

      });
    },
    // draw() {
    //   //第二步 初始化 echarts
    //   var myChart = echarts.init(this.$refs.chart);
    //   //第三步绘制图表
    //   myChart.setOption({
    //     color: ["red"],
    //     title: {
    //       text: " 订单统计",
    //     },
    //     legend: {},
    //     tooltip: {},
    //     xAxis: {
    //       data: this.xData,
    //     },
    //     yAxis: {},
    //     series: this.yData.map((item) => {
    //       item.type = "line";
    //       return item;
    //     }),
    //   });
    // },
  },

  created() {
    ordertotalReq().then(res => {
      console.log(res);

      // 把时间转换成字符串
      this.xData = res.data.data.map((item) =>
        dayjs(item.orderTime).format("MM-DD HH:mm")
      );

      this.yData[0].data = res.data.data.map((item) => item.orderAmount);

      // this.draw();
    });
  },
};
</script>

<style lang="less" scoped>
.sale {
  height: 100%;
  height: 500px;
}
</style>